<link rel="stylesheet" href="${ctxStatic}/modules/sys/sysLogin.css?${_version}">
<% layout('/layouts/default.html', {title: '登录', libs: ['validate'], bodyClass: 'login-page'}){ %>
<% include('/include/upgrade.html'){} // 如果客户浏览器版本过低，则显示浏览器升级提示。 %>
<!-- <link rel="stylesheet" href="${ctxStatic}/icheck/1.0/square/blue.css?${_version}"> -->
<link rel="stylesheet" href="${ctxStatic}/jquery-toastr/2.1/toastr.min.css?${_version}">
<link rel="stylesheet" href="${ctxStatic}/modules/sys/sysLogin.css?${_version}">
<style>
	.wrapper{
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		-ms-overflow-x: hidden;
		overflow-x: hidden;
		-ms-overflow-y: hidden;
		overflow-y: hidden;
		/*background-color: rgba(153, 153, 153, 1);*/
		background-image: url("${ctxStatic}/m/images/loginBg.png");
		background-position: right top;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: cover;
		background-origin: border-box;
		border: none;
		border-radius: 0px;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	.loginBox {
		width: 665px;
		height: 407px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		background: url("${ctxStatic}/m/images/loginBox.png");
		background-size: cover;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	.main {
		width: 100%;
		height: calc(100% - 60px);
		display: flex;
	}

	.right-box {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		padding: 5px 0 0 30px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}


	.left-box {
		width: 314px;
		padding: 90px 0 0 30px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;

	}
	.left-box h1 {
		font-size: 40px;
		line-height: 40px;
		color: #ffffff;
		margin: 0px;
	}
	.left-box h2 {
		font-size: 22px;
		line-height: 30px;
		color: #ffffff;
		margin: 0px;
	}

	.left-box h3 {
		font-size: 14px;
		line-height: 30px;
		color: #ffffff;
		margin: 0px;
	}

	.login-box {
		z-index: 999;
		display: flex;
		flex-direction: column;

	}
	.login-box-body {
		height: 260px;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
	}

	.login-title {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		font-size: 36px;
		font-family: Source Han Sans CN;
		font-weight: bold;

		padding-top:105px;

	}
	.login-title span{
		color: #7DFCFE;
		/*background-image:-webkit-linear-gradient(bottom,rgba(68, 123, 235, 0.4),#ffffff,#ffffff);*/
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 44.7998046875%, rgba(68, 123, 235, 0.3) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

	}

	.login-form {
		height: 55%;
		width: 285px;
		box-sizing: border-box;
		margin-top:15px

	}
	.form-control{
		height: 36px !important;
	}

	.login-form input {
		width: 91%;
		font-size: 16px;
		color: #00A0E9 !important;
		border: none;
		outline: none;
		background: transparent;
	}
	/*input:-internal-autofill-selected {*/
	/*	appearance: menulist-button;*/
	/*	background-image: none !important;*/
	/*	background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0)) !important;*/
	/*	color: -internal-light-dark(black, white) !important;*/
	/*}*/


	.login-form input:focus {
		background-color: none;
		border: none;
	}

	.login-form .input-box {
		box-sizing: border-box;
		margin-top: 5%;
		padding: 0 10px;
		border: 1px solid #ddd;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		color:#AAAAAA;
		font-size: 16px;


	}

	.login-form .input-box .input-icon {
		height: 36px;
		padding-right: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

	}


	.rememberme {
		width: 320px;
		height: 20px;
		margin-top: 10px;
		border: none;
	}

	.rememberme input {
		height: 16px;
		width: 16px;
	}

	.bottom-box {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
	}

	.bottom-text {
		width: 460px;
		height: 60px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 24px;
		text-align: center;
	}

	/* .bottom-box {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 82px;
		width: 100%;
	}

	.bottom-text {
		width: 460px;
		height: 48px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 24px;
		text-align: center;
	} */
	.newBtn{
		width: 100%;
		padding: 12px 20px;
		font-size: 18px !important;
		background-color: #1f69e6;
		color: #fff;
		border: 1px solid #1f69e6;
		font-family: Microsoft Yahei,WenQuanYi Micro Hei,sans-serif;
		border-radius: 3px;
		outline: 0;

	}
	.form-control:focus{
		outline: 0;
		box-shadow: 0 0 0 0px rgb(24 80 236 / 20%) !important;
	}
	input:-webkit-autofill {
		-webkit-box-shadow: 0 0 0px 1000px transparent inset;
		transition: background-color 5000s ease-in-out 0s;
		-webkit-text-fill-color:  #AAAAAA;
		font-size: 16px;
		outline: none;
	}
	.loginLogo{
		text-align: center;
	}
	.loginLogo img {
		width: 128px;
		height: 66px;
		margin: 30px 30px 0 0;
	}


</style>
<div class="main">
	<div class="loginBox">
		<div class="left-box">
			<h1>Welcome</h1>
			<h1>—</h1>
			<h2>数字督查考核平台</h2>
			<h3>目标管理，任务跟踪、绩效提升</h3>
		</div>
		<div class="right-box">
			<div class="login-box" style="margin:0px auto">
<!--				<div class="login-title">-->
					<!--					<span >${@Global.getConfig('projectName')}<text style="font-size: 20px;padding-left: 5px;">${@Global.getConfig('edit.productVersion')}</text></span>-->
					<!--				</div>-->
				<div class="loginLogo">
					<img src="${ctxStatic}/m/images/llogo.png" />
				</div>
				<div class="login-form">
					<#form:form id="loginForm" model="${user!}" action="${ctx}/login" method="post">
					<div class="input-box">
						<div class="input-icon">
							<img style="height: 16px;width: 16px;" src="${ctxStatic}/m/images/user.png">
						</div>
						<#form:input type="text" name="username" class="form-control required"
						data-msg-required="${text('请填写登录账号.')}" placeholder="${text('登录账号')}"
						value="${cookie('rememberUserCode')}" />
					</div>
					<div class="input-box" >
						<div class="input-icon">
							<img style="height: 16px;width: 16px;" src="${ctxStatic}/m/images/pass.png">
						</div>
						<#form:input type="password" name="password" class="form-control required"
						data-msg-required="${text('请填写登录密码.')}" placeholder="${text('登录密码')}" autocomplete="off" />
					</div>

					<div class="form-group" style="margin-top:20px">
						<div class="mt5 icheck" >
							<label id="rememberPsw" title="${text('公共场所慎用,下次不需要再填写帐号')}"><input type="checkbox"
																								name="rememberUserCode" ${isNotBlank(cookie('rememberUserCode'))?' checked':''}
								class="form-control" data-style="minimal-grey"> ${text('记住账号')}</label> &nbsp;
						</div>
					</div>

					<div class="form-group">
						<!-- <input type="hidden" name="param_deviceType" value="pc"> -->
						<input type="hidden" name="__url" value="${parameter.__url!}">
						<button type="submit" class="newBtn"  id="btnSubmit"
								data-loading="${text('登录验证成功，正在进入...')}"
								data-login-valid="${text('正在验证登录，请稍候...')}">${text('登 录')}</button>
					</div>
				</#form:form>
			</div>
			<div class="login-copyright">
				<a id="loginKey" data-key="${@Global.getConfig('shiro.loginSubmit.secretKey')}"
				   href="http://jeesite.com" target="_blank"></a>
			</div>

		</div>
	</div>
</div>
</div>


<div class="bottom-box">
	<p class="bottom-text">为了获得更好的用户体验，建议使用谷歌Chrome浏览器或360极速浏览器访问本系统</p>
</div>
<% } %>
<script src="${ctxStatic}/common/des.js?${_version}"></script>
<script src="${ctxStatic}/jquery-toastr/2.1/toastr.min.js?${_version}"></script>
<script src="${ctxStatic}/modules/sys/sysLogin.js?${_version}"></script>
